<template>
   <div class="outer">
     <div class="button">
        <checked-button :isChecked="item.checked" @click.native="checked"></checked-button>
     </div>
     <div class="right">
         <img :src="item.img" alt="">
       </div>
     <div class="left">
        <div class="title">{{item.title}}</div>
        <div class="desc">{{item.desc}}</div>
        <div class="price">{{item.price}}</div>
        <span class="count">{{counter}}</span>
     </div>

   </div>
</template>

<script>
  import CheckedButton from "./CheckedButton";
  export default {
    name: "CartListItem",
    props:{
      item:{
        type:Object
      },
      counter:{
        type:Number,
        default:0
      }
    },
    components:{
      CheckedButton
    },
    methods:{
      checked(){
        this.item.checked=!this.item.checked;
      }
    }

  }
</script>

<style scoped>
  .outer{
     padding: 10px;
    display: flex;
    border-bottom: 2px solid #cecdcd;
    justify-content: flex-start;
    align-items: center;
  }
  .button{
     flex: 1;
  }
  .right{
    flex: 3;
  }
  .right img{
    text-align: center;
    width: 85px;
    height: 120px;
    border-radius: 10px;
  }
  .left{
    flex: 7;
    padding-left: 10px;
    overflow: hidden;
    align-items: center;
  }
  .left .title{
     width: 100%;
     white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font:20px '微软雅黑';
    font-weight: revert;
    padding-bottom: 20px;
  }
  .left .desc{
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font:15px '微软雅黑';
    padding-bottom: 20px;
  }
  .left .price{
    font:18px '微软雅黑';
      color: orange;
  }
  .left .count{
    float: right;
    position: relative;
    right: 0px;
    bottom: 19px;
  }


</style>
